<div class="overview">
  <div class="middle">
    <!-- Empty states -->
    <div ng-if="overview.showGetStarted" class="container-fluid empty-state">
      <alerts alerts="overview.state.alerts"></alerts>
      <!-- Getting started -->
      <div class="empty-state-message text-center">
        <div ng-if="project.metadata.name | canIAddToProject">
          <h2>Get started with your project.</h2>
          <p>
            Add content to your project from the catalog of web frameworks, databases, and other components. You may also deploy an existing image, create or replace resources from their YAML or JSON definitions, or select an item shared from another project.
          </p>
          <div class="empty-state-message-main-action">
            <button class="btn btn-primary btn-lg" ng-click="browseCatalog()">
              Browse Catalog
            </button>
          </div>
          <div class="empty-state-message-secondary-action">
            <button class="btn btn-default btn-sm" ng-click="showOrderingPanel('deployImage')">
              Deploy Image
            </button>
            <button class="btn btn-default btn-sm" ng-click="showOrderingPanel('fromFile')">
              Import YAML / JSON
            </button>
            <button class="btn btn-default btn-sm" ng-click="showOrderingPanel('fromProject')">
              Select from Project
            </button>
          </div>
        </div>
        <div ng-if="!(project.metadata.name | canIAddToProject)">
          <h2>Welcome to project {{projectName}}.</h2>
          <ng-include src="'views/_request-access.html'"></ng-include>
        </div>
      </div>
    </div>
    <div ng-if="overview.showLoading" class="container-fluid loading-message">
      Loading...
    </div>
    <div ng-if="!overview.showGetStarted && !overview.showLoading">
      <div class="middle-header">
        <div class="container-fluid toolbar-container">
          <div class="data-toolbar" role="toolbar" aria-label="Filter Toolbar">
            <div class="data-toolbar-filter" role="group">
              <ui-select
                class="data-toolbar-dropdown"
                ng-model="overview.filterBy"
                search-enabled="false"
                append-to-body="true"
                ng-disabled="overview.disableFilter">
                <ui-select-match>{{$select.selected.label}}</ui-select-match>
                <ui-select-choices repeat="option.id as option in overview.filterByOptions">
                  {{option.label}}
                </ui-select-choices>
              </ui-select>
              <div ng-if="overview.filterBy === 'label'" class="label-filter">
                <!-- FIXME: This disables the add button but not the label filter selectize controlers. -->
                <fieldset ng-disabled="overview.disableFilter">
                  <project-filter></project-filter>
                </fieldset>
              </div>
              <div ng-if="overview.filterBy === 'name'" class="name-filter">
                <form role="form" class="search-pf has-button">
                  <div class="form-group filter-controls has-clear">
                    <div class="search-pf-input-group">
                      <label for="name-filter" class="sr-only">Filter by name</label>
                      <input
                        type="text"
                        class="form-control"
                        ng-model="overview.filterText"
                        placeholder="Filter by name"
                        autocorrect="off"
                        autocapitalize="none"
                        spellcheck="false"
                        ng-disabled="overview.disableFilter">
                      <button
                        type="button"
                        class="clear"
                        aria-hidden="true"
                        ng-if="overview.filterText && !overview.disableFilter"
                        ng-click="overview.filterText = ''">
                        <span class="pficon pficon-close"></span>
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
            <div class="vertical-divider"></div>
            <div class="view-by-options">
              <span class="data-toolbar-label">List by</span>
              <ui-select class="data-toolbar-dropdown" ng-model="overview.viewBy" search-enabled="false">
                <ui-select-match>{{$select.selected.label}}</ui-select-match>
                <ui-select-choices repeat="option.id as option in overview.viewByOptions">
                  {{option.label}}
                </ui-select-choices>
              </ui-select>
            </div>
          </div>
          <div ng-if="overview.filterActive" class="filter-status">
            <span ng-if="overview.viewBy !== 'pipeline'">
              Showing <strong>{{overview.filteredSize}}</strong> of <strong>{{overview.size}}</strong> items
            </span>
            <span ng-if="overview.viewBy === 'pipeline' && overview.pipelineBuildConfigs | hashSize">
              Showing <strong>{{overview.filteredPipelineBuildConfigs | hashSize}}</strong> of <strong>{{overview.pipelineBuildConfigs | hashSize}}</strong> pipelines
            </span>
          </div>
        </div>
      </div>
      <div class="middle-content">
        <div class="container-fluid">
          <alerts alerts="overview.state.alerts"></alerts>
          <div ng-if="overview.everythingFiltered && overview.viewBy !== 'pipeline'">
            <div class="empty-state-message text-center h2">
              The filter is hiding all resources.
              <button type="button" class="btn btn-link inline-btn-link" ng-click="overview.clearFilter()">Clear All Filters</button>
            </div>
          </div>
          <div ng-if="!overview.everythingFiltered || overview.viewBy === 'pipeline'">
            <div ng-if="overview.viewBy === 'app'" ng-repeat="app in overview.apps">
              <div ng-if="app" class="app-heading">
                <h2>
                  <div class="component-label">Application</div>
                  <span ng-bind-html="app | highlightKeywords : overview.state.filterKeywords"></span>
                </h2>
                <div class="overview-routes" ng-if="overview.routesToDisplayByApp[app] | size">
                  <h3 class="overview-route" ng-repeat="route in overview.routesToDisplayByApp[app] track by (route | uid)">
                    <span ng-if="route | isWebRoute">
                      <a ng-href="{{route | routeWebURL}}" target="_blank">
                        {{route | routeLabel}}
                        <i class="fa fa-external-link" aria-hidden="true"></i>
                      </a>
                    </span>
                    <span ng-if="!(route | isWebRoute)">{{route | routeLabel}}</span>
                  </h3>
                </div>
              </div>
              <h2 ng-if="!app">
                Other Resources
              </h2>
              <div class="list-pf">
                <overview-list-row
                     ng-repeat="deploymentConfig in overview.filteredDeploymentConfigsByApp[app] track by (deploymentConfig | uid)"
                     ng-init="dcName = deploymentConfig.metadata.name"
                     api-object="deploymentConfig"
                     current="overview.currentByDeploymentConfig[dcName]"
                     previous="overview.getPreviousReplicationController(deploymentConfig)"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="deployment in overview.filteredDeploymentsByApp[app] track by (deployment | uid)"
                     api-object="deployment"
                     current="overview.currentByDeploymentUID[deployment.metadata.uid]"
                     previous="overview.replicaSetsByDeploymentUID[deployment.metadata.uid][1]"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="replicationController in overview.filteredReplicationControllersByApp[app] track by (replicationController | uid)"
                     api-object="replicationController"
                     current="replicationController"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="replicaSet in overview.filteredReplicaSetsByApp[app] track by (replicaSet | uid)"
                     api-object="replicaSet"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="statefulSet in overview.filteredStatefulSetsByApp[app] track by (statefulSet | uid)"
                     api-object="statefulSet"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="daemonSet in overview.filteredDaemonSetsByApp[app] track by (daemonSet | uid)"
                     api-object="daemonSet"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="pod in overview.filteredMonopodsByApp[app] track by (pod | uid)"
                     api-object="pod"
                     state="overview.state">
                </overview-list-row>
              </div>
            </div>
            <div ng-if="overview.viewBy === 'resource'">
              <div ng-if="overview.filteredDeploymentConfigs | hashSize">
                <h2>
                  <span ng-if="overview.deployments | hashSize">
                    Deployment Configs
                  </span>
                  <span ng-if="!(overview.deployments | hashSize)">
                    Deployments
                  </span>
                </h2>
                <div class="list-pf">
                  <overview-list-row
                       ng-repeat="deploymentConfig in overview.filteredDeploymentConfigs track by (deploymentConfig | uid)"
                       ng-init="dcName = deploymentConfig.metadata.name"
                       api-object="deploymentConfig"
                       current="overview.currentByDeploymentConfig[dcName]"
                       previous="overview.getPreviousReplicationController(deploymentConfig)"
                       state="overview.state">
                  </overview-list-row>
                </div>
              </div>
              <div ng-if="overview.filteredDeployments | hashSize">
                <h2>Deployments</h2>
                <div class="list-pf">
                  <overview-list-row
                       ng-repeat="deployment in overview.filteredDeployments track by (deployment | uid)"
                       api-object="deployment"
                       current="overview.currentByDeploymentUID[deployment.metadata.uid]"
                       previous="overview.replicaSetsByDeploymentUID[deployment.metadata.uid][1]"
                       state="overview.state">
                  </overview-list-row>
                </div>
              </div>
              <div ng-if="overview.filteredReplicationControllers | hashSize">
                <h2>Replication Controllers</h2>
                <div class="list-pf">
                  <overview-list-row
                       ng-repeat="replicationController in overview.filteredReplicationControllers track by (replicationController | uid)"
                       api-object="replicationController"
                       state="overview.state">
                  </overview-list-row>
                </div>
              </div>
              <div ng-if="overview.filteredReplicaSets | hashSize">
                <h2>Replica Sets</h2>
                <div class="list-pf">
                  <overview-list-row
                       ng-repeat="replicaSet in overview.filteredReplicaSets track by (replicaSet | uid)"
                       api-object="replicaSet"
                       state="overview.state">
                  </overview-list-row>
                </div>
              </div>
              <div ng-if="overview.filteredStatefulSets | hashSize">
                <h2>Stateful Sets</h2>
                <div class="list-pf">
                  <overview-list-row
                       ng-repeat="statefulSet in overview.filteredStatefulSets track by (statefulSet | uid)"
                       api-object="statefulSet"
                       state="overview.state">
                  </overview-list-row>
                </div>
              </div>
              <div ng-if="overview.filteredDaemonSets | hashSize">
                <h2>Daemon Sets</h2>
                <div class="list-pf">
                  <overview-list-row
                       ng-repeat="daemonSet in overview.filteredDaemonSets track by (daemonSet | uid)"
                       api-object="daemonSet"
                       state="overview.state">
                  </overview-list-row>
                </div>
              </div>
              <div ng-if="overview.filteredMonopods | hashSize">
                <h2>Pods</h2>
                <div class="list-pf">
                  <overview-list-row
                       ng-repeat="pod in overview.filteredMonopods track by (pod | uid)"
                       api-object="pod"
                       state="overview.state">
                  </overview-list-row>
                </div>
              </div>
            </div>
            <div ng-if="overview.viewBy === 'pipeline'">
              <!-- TODO: Reuse pipelines empty state message from pipelines.html -->
              <div ng-if="!overview.pipelineBuildConfigs.length" class="empty-state-message text-center">
                <h2>No pipelines.</h2>
                <div ng-if="project.metadata.name | canIAddToProject">
                  <p>
                    No pipelines have been added to project {{projectName}}.
                    <br>
                    Learn more about
                    <a ng-href="{{ 'pipeline-builds' | helpLink}}" target="_blank">Pipeline Builds</a>
                    and the
                    <a ng-href="{{ 'pipeline-plugin' | helpLink}}" target="_blank">OpenShift Pipeline Plugin</a>.
                  </p>
                  <p ng-if="(project.metadata.name | canIAddToProject) && overview.samplePipelineURL">
                    <a ng-href="{{overview.samplePipelineURL}}" class="btn btn-lg btn-primary">
                      Create Sample Pipeline
                    </a>
                  </p>
                </div>
                <div ng-if="!(project.metadata.name | canIAddToProject)">
                  <ng-include src="'views/_request-access.html'"></ng-include>
                </div>
              </div>
              <div ng-if="(overview.pipelineBuildConfigs | hashSize) && !(overview.filteredPipelineBuildConfigs | hashSize)">
                <div class="empty-state-message text-center h2">
                  All pipelines are filtered.
                  <button type="button" class="btn btn-link inline-btn-link" ng-click="overview.clearFilter()">Clear All Filters</button>
                </div>
              </div>
              <div ng-repeat="pipeline in overview.filteredPipelineBuildConfigs track by (pipeline | uid)">
                <div ng-if="overview.buildConfigsInstantiateVersion | canI : 'create'" class="pull-right">
                  <button
                      class="btn btn-default"
                      ng-if="overview.buildConfigsInstantiateVersion | canI : 'create'"
                      ng-click="overview.startBuild(pipeline)">
                    Start Pipeline
                  </button>
                </div>
                <h2>
                  <div class="component-label">Pipeline</div>
                  <span ng-bind-html="pipeline.metadata.name | highlightKeywords : overview.state.filterKeywords"></span>
                </h2>
                <div ng-if="!(overview.recentPipelinesByBuildConfig[pipeline.metadata.name] | hashSize)" class="mar-bottom-lg">
                  No pipeline runs.
                </div>
                <div ng-if="overview.recentPipelinesByBuildConfig[pipeline.metadata.name] | hashSize" class="build-pipelines">
                  <div ng-repeat="pipeline in overview.recentPipelinesByBuildConfig[pipeline.metadata.name] track by (pipeline | uid)"
                       class="row build-pipeline-wrapper animate-repeat">
                    <div class="col-sm-12">
                      <build-pipeline build="pipeline" build-config-name-on-expanded="true" collapse-pending="true"></build-pipeline>
                    </div>
                  </div>
                </div>
                <div ng-if="!overview.deploymentConfigsByPipeline[pipeline.metadata.name].length" class="mar-bottom-lg">
                  This pipeline is not associated with any deployments.
                </div>
                <div ng-if="overview.deploymentConfigsByPipeline[pipeline.metadata.name].length" class="list-pf">
                  <overview-list-row
                       ng-repeat="dcName in overview.deploymentConfigsByPipeline[pipeline.metadata.name]"
                       api-object="overview.deploymentConfigs[dcName]"
                       current="overview.currentByDeploymentConfig[dcName]"
                       previous="overview.getPreviousReplicationController(deploymentConfig)"
                       state="overview.state"
                       hide-pipelines="true">
                  </overview-list-row>
                </div>
              </div>

              <!-- Currently we only filter the pipelines. Hide "Other Resources" if a pipeline filter is active or if we're showing the pipeline empty state message. -->
              <div class="list-pf" ng-if="overview.pipelineViewHasOtherResources && !overview.hidePipelineOtherResources">
                <h2>Other Resources</h2>
                <overview-list-row
                     ng-repeat="deploymentConfig in overview.deploymentConfigsNoPipeline track by (deploymentConfig | uid)"
                     ng-init="dcName = deploymentConfig.metadata.name"
                     api-object="deploymentConfig"
                     current="overview.currentByDeploymentConfig[dcName]"
                     previous="overview.getPreviousReplicationController(deploymentConfig)"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="deployment in overview.deployments track by (deployment | uid)"
                     api-object="deployment"
                     current="overview.currentByDeploymentUID[deployment.metadata.uid]"
                     previous="overview.replicaSetsByDeploymentUID[deployment.metadata.uid][1]"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="replicationController in overview.vanillaReplicationControllers track by (replicationController | uid)"
                     api-object="replicationController"
                     current="replicationController"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="replicaSet in overview.vanillaReplicaSets track by (replicaSet | uid)"
                     api-object="replicaSet"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="statefulSet in overview.statefulSets track by (statefulSet | uid)"
                     api-object="statefulSet"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="daemonSet in overview.daemonSets track by (daemonSet | uid)"
                     api-object="daemonSet"
                     state="overview.state">
                </overview-list-row>
                <overview-list-row
                     ng-repeat="pod in overview.monopods track by (pod | uid)"
                     api-object="pod"
                     state="overview.state">
                </overview-list-row>
              </div>
            </div>
            <!-- Show Mobile Apps -->
            <div ng-if="(overview.filteredMobileClients | size) && AEROGEAR_MOBILE_ENABLED && !overview.hidePipelineOtherResources">
              <h2>Mobile Clients</h2>
              <div class="list-pf">
                <mobile-client-row
                  ng-repeat="mobileapp in overview.filteredMobileClients track by (mobileapp | uid)"
                  api-object="mobileapp"
                  state="overview.state"></mobile-client-row>
              </div>
            </div>
            <!-- Show Kubevirt Virtual Machines -->
            <div ng-if="(overview.filteredOfflineVirtualMachines | size) && !overview.hidePipelineOtherResources">
              <h2>Virtual Machines</h2>
              <div class="list-pf">
                <virtual-machine-row
                  ng-repeat="ovm in overview.filteredOfflineVirtualMachines track by (ovm | uid)"
                  api-object="ovm"
                  state="overview.state"></virtual-machine-row>
              </div>
            </div>
            <!-- Show provisioned services. -->
            <div ng-if="overview.filteredServiceInstances.length && !overview.hidePipelineOtherResources">
              <h2>
                Provisioned Services
              </h2>
              <div class="list-pf">
                <service-instance-row
                  ng-repeat="serviceInstance in overview.filteredServiceInstances track by (serviceInstance | uid)"
                  api-object="serviceInstance"
                  bindings="overview.bindingsByInstanceRef[serviceInstance.metadata.name]"
                  state="overview.state"></service-instance-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
